@import './variables.scss';
@import './mixin.scss';
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';

body {
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

label {
  font-weight: 700;
}

html {
  height: 100%;
  box-sizing: border-box;
}

#app {
  height: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

div:focus {
  outline: none;
}

.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

// main-container global css
.app-container {
  padding: 20px;
}

.app-main {
    // background: #00706d;
    // background: #304156;
}
// 初始化
/*清除元素默认的内外边距  */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/*让所有斜体 不倾斜*/
em,
i {
  font-style: normal;
}
/*去掉列表前面的小点*/
li {
  list-style: none;
}
/*图片没有边框   去掉图片底侧的空白缝隙*/
img {
  border: 0; /*ie6*/
  vertical-align: middle;
}
/*让button 按钮 变成小手*/
button {
  cursor: pointer;
}
/*取消链接的下划线*/
a {
  color: #666;
  text-decoration: none;
}

a:hover {
  color: #e33333;
}
h4 {
  font-weight: 400;
}
 // 面板
 .panel {
  position: relative;
  border: 15px solid transparent;
  border-width: 51px 38px 20px 132px;
  border-image: url('~@/assets/images/border.png');
  border-image-slice: 51 38 20 132;
  margin-bottom: 20px;

  .inner {
    position: absolute;
    padding: 24px 36px;
    top: -51px;
    left: -132px;
    right: -38px;
    bottom: -20px;
    // background-color: rgb(64, 209, 28);
  }
}
.panel h3 {
  font-style: 20px;
  color: #fff;
  font-weight: 400;
}

 //  公共面板2
 .panel-page {
  position: relative;
 height: 310px;
 border: 1px solid rgba(25, 186, 139, 0.17);
 background: url('~@/assets/AnalysisPage/images/line\(1\).png');
 padding: 0 15px 40px;
 margin-bottom: 15px;
 &::before {
   position: absolute;
   top: 0;
   left: 0;
   content: "";
   width: 10px;
   height: 10px;
   border-top: 2px solid #02a6b5;
   border-left: 2px solid #02a6b5;
 }
 &::after {
   position: absolute;
   top: 0;
   right: 0;
   content: "";
   width: 10px;
   height: 10px;
   border-top: 2px solid #02a6b5;
   border-right: 2px solid #02a6b5;
 }
 .panel-footer {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
  &::before {
    position: absolute;
    bottom: 0;
    left: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-bottom: 2px solid #02a6b5;
    border-left: 2px solid #02a6b5;
  }
  &::after {
    position: absolute;
    bottom: 0;
    right: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-bottom: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
  }
 }
}
 //  公共面板3
 .panel3{
  position: relative;
//  height: 310px;
 border: 1px solid rgba(25, 186, 139, 0.17);
//  background: url('~@/assets/AnalysisPage/images/line\(1\).png');
 padding:10px;
//  margin-bottom: 15px;
h2 {
  font-size: 18px;
  text-align: center;
}
 &::before {
   position: absolute;
   top: 0;
   left: 0;
   content: "";
   width: 10px;
   height: 10px;
   border-top: 2px solid #02a6b5;
   border-left: 2px solid #02a6b5;
 }
 &::after {
   position: absolute;
   top: 0;
   right: 0;
   content: "";
   width: 10px;
   height: 10px;
   border-top: 2px solid #02a6b5;
   border-right: 2px solid #02a6b5;
 }
 .panel-footer {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
  &::before {
    position: absolute;
    bottom: 0;
    left: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-bottom: 2px solid #02a6b5;
    border-left: 2px solid #02a6b5;
  }
  &::after {
    position: absolute;
    bottom: 0;
    right: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-bottom: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
  }
 }
}